<template>
	<view class="content">
		<view class="input-group">
			<view class="username" style="height:54upx">
				<image class="img" src="/static/iocn/tel.png" style="height:54upx" mode="aspectFill"></image>
				<input
					v-model="phone"
					maxlength="11"
					type="number"
					pattern="\d*"
					placeholder="输入手机号"
					placeholder-class="placeholderClass"
					@click="hideTabbar"
					@focus="hideTabbar"
					@blur="showTabbar"
				/>
			</view>
			<view class="password" v-if="!showVerify">
				<image class="img" src="/static/iocn/pwd.png" mode="aspectFill"></image>
				<input placeholder="输入密码" v-model="passwd" password="true" placeholder-class="placeholderClass" @click="hideTabbar" @focus="hideTabbar" @blur="showTabbar" />
			</view>
			<view class="verify" v-if="showVerify">
				<image class="img" src="/static/iocn/verify.png" mode="aspectFill"></image>
				<input
					placeholder="输入手机验证码"
					placeholder-class="placeholderClass"
					v-model="verify"
					maxlength="4"
					type="number"
					style="width:245upx"
					@click="hideTabbar"
					@focus="hideTabbar"
					@blur="showTabbar"
				/>
				<button class="verify-button" @tap="getCodeAction">{{ codeBtn.text }}</button>
			</view>
		</view>
		<view class="botton-group"><button class="submit-button" :disabled="btnActive" :loading="isShowLoading" @click="loginAction">登录</button></view>
		<view class="switch" @tap="toSwitch">切换手机{{ showVerify ? '密码' : '验证码' }}登录</view>
		<view class="to-register" :style="{ visibility: tabbar ? 'visible' : 'hidden' }" @tap="toRegister">注册</view>
	</view>
</template>

<script>
import { BASE_URL, smsLogin, login, sendCode,getHcp, getRongYunToken } from '@/utils/api';
// #ifdef APP-PLUS
const rongIm = uni.requireNativePlugin('GZF-RongIM');
// #endif
export default {
	data() {
		return {
			phone: '',
			passwd: '',
			verify: '',
			showVerify: true,
			seconds: 60,
			codeBtn: {
				text: '获取验证码',
				waitingCode: false,
				count: this.seconds
			},
			btnActive: false,
			isShowLoading: false,
			statusBarHeight: 0,
			tabbar: true,
			windowHeight: ''
		};
	},
	methods: {
		toRegister() {
			uni.navigateTo({
				url: '../register/register'
			});
		},
		showTabbar() {
			this.changeTabBar(true);
		},
		hideTabbar() {
			this.tabbar = false;
			this.$forceUpdate();
		},
		changeTabBar(value) {
			this.tabbar = value;
		},
		toSwitch() {
			this.btnActive = false;
			this.isShowLoading = false;
			this.showVerify = !this.showVerify;
		},
		async getCodeAction() {
			if (!this.phone || this.phone.length != 11) {
				uni.showToast({
					icon: 'none',
					title: '手机号输入错误',
					duration: 1000,
					position: 'bottom'
				});
				return;
			}
			let res = await sendCode(this.phone, true);
			console.log(res);
			if (res.status == 0) {
				uni.showToast({
					icon: 'none',
					title: '获取验证码成功',
					duration: 1000,
					position: 'bottom'
				});
				this.countDown();
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message,
					duration: 1000,
					position: 'bottom'
				});
			}
		},
		countDown: function() {
			this.codeBtn.waitingCode = true;
			this.codeBtn.count = this.seconds;
			this.codeBtn.text = this.codeBtn.count + 's';

			let countdown = setInterval(() => {
				this.codeBtn.count--;
				this.codeBtn.text = this.codeBtn.count + 's';
				if (this.codeBtn.count < 0) {
					clearInterval(countdown);
					this.codeBtn.text = '重新发送';
					this.codeBtn.waitingCode = false;
				}
			}, 1000);
		},
		async getRongYunToken(){
			let res = await getRongYunToken();
			if (res.status == 0) {
				this.id = res.data.userId;
				uni.showLoading({ title: '加载中...' })
				rongIm.login(JSON.stringify(res.data),
					result => {
						uni.setStorageSync("rongLogin", true);
						uni.hideLoading();
						if(this.isRelanuch){
							uni.switchTab({
								url: '/pages/tabbar/home/home'
							});
						} else {
							uni.navigateBack();
						}
					});
			}
		},
		async loginAction() {
			if (this.btnActive) {
				return;
			}
			if (!this.phone || this.phone.length != 11) {
				uni.showToast({
					icon: 'none',
					title: '手机号输入错误',
					duration: 1000,
					position: 'bottom'
				});
				return;
			}
			if (this.showVerify && (!this.verify || this.verify.length != 4)) {
				uni.showToast({
					icon: 'none',
					title: '验证码输入错误',
					duration: 1000,
					position: 'bottom'
				});
				return;
			}
			if (!this.showVerify && !this.passwd) {
				uni.showToast({
					icon: 'none',
					title: '请输入密码',
					duration: 1000,
					position: 'bottom'
				});
				return;
			}

			this.btnActive = true;
			this.isShowLoading = true;
			let params = {};
			let platform = uni.getSystemInfoSync().platform;
			params['phone'] = this.phone;
			params['device'] = platform;
			let res = '';
			if (this.showVerify) {
				params['code'] = this.verify;
				console.log(JSON.stringify(params));
				res = await smsLogin(params);
			} else {
				params['password'] = this.passwd;
				console.log(JSON.stringify(params));
				res = await login(params);
			}
			console.log(res);
			try {
				if (res.status == 0) {
					uni.setStorageSync('auth_token', res.data.token);
					uni.setStorageSync('user_id', res.data.id);
					uni.removeStorageSync("conversationList");
					this.getHcp(res.data.token);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 1000,
						position: 'bottom'
					});
				}
			} catch (e) {
				console.log(e);
			} finally {
				this.btnActive = false;
				this.isShowLoading = false;
			}
		},
		async getHcp(token){
			let res = await getHcp();
			if(res.status == 0){
				res.data.token = token;
				console.log(res.data,'=====111111====')
				uni.setStorageSync("userInfo", res.data);
				
				// #ifdef APP-PLUS
				console.log(rongIm);
				plus.key.hideSoftKeybord();
				if(rongIm){
					rongIm.userInfo(JSON.stringify(res.data), result => {
						this.getRongYunToken();
					});
				}else{
					console.log(this.isRelanuch);
					if(this.isRelanuch){
						uni.switchTab({
							url: '/pages/tabbar/home/home'
						});
					} else {
						uni.navigateBack();
					}
				}
				
				// #endif
				
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: '登录成功',
					duration: 1000,
					position:'bottom'
				});
				setTimeout(() => { 
					if(this.isRelanuch){
						uni.switchTab({
							url: '/pages/tabbar/home/home'
						});
					}else{
						uni.navigateBack();
					}
					
				}, 1000);
				// #endif
			}	
		}
	},
	onLoad(opt) {
		this.isRelanuch = opt.isRelanuch;
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
		uni.getSystemInfo({
			success: res => {
				this.windowHeight = res.windowHeight;
			}
		});

		setTimeout(() => {
			uni.onWindowResize(res => {
				console.log(res.size.windowHeight);
				console.log(this.windowHeight);
				if (res.size.windowHeight < this.windowHeight) {
					this.hideTabbar();
				} else {
					this.changeTabBar(true);
				}
			});
		}, 2000);
	}
};
</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100%;
	background: #ffffff;
	border-top: 2upx solid #e3e3e3;
}

/* 登录 */
.input-group {
	display: flex;
	flex-direction: column;
	padding-top: 319upx;
	padding-left: 110upx;
	padding-right: 110upx;

	.username,
	.password,
	.verify {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		width: 100%;
		height: 44upx;
		margin: 20upx 0upx;

		.img {
			width: 40upx;
			height: 40upx;
		}

		input {
			margin-left: 25upx;
			border-bottom: 2upx solid #333333;
			width: 455upx;
			height: 44upx;
		}
	}
}

.verify-button {
	font-size: 29upx;
	margin-left: 20upx;
	border-radius: 0upx;
	line-height: 44upx;
	text-align: center;
	background-color: rgba(244, 244, 244, 1);
	color: rgba(173, 133, 252, 1);

	&:after {
		border: none;
	}
}

.botton-group {
	display: flex;
	flex-direction: column;
	padding-left: 110upx;
	padding-right: 110upx;
	padding-top: 80upx;

	.submit-button {
		width: 98%;
		height: 88upx;
		background: rgba(173, 133, 252, 1);
		border-radius: 4upx;
		font-size: 34upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);

		&:after {
			border: none;
		}
	}
}

.switch {
	margin: 40upx 25%;
	text-align: center;
	font-size: 34upx;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(51, 51, 51, 1);
	line-height: 36upx;
	width: 50%;
}

.to-register {
	position: absolute;
	text-align: center;
	bottom: 100upx;
	width: 26%;
	line-height: 100upx;
	margin: 0 37%;
	font-size:34upx;
	font-family:PingFang SC;
	font-weight:400;
	color:rgba(51,51,51,1);
}
.placeholderClass {
	font-weight: 400;
	color: rgba(153, 153, 153, 1);
	font-size: 30upx;
}
</style>